import React, { Component } from 'react'
import {
  HashRouter as Router,
  Route,
  Redirect,
  useParams,
  Link,
  useRouteMatch
} from 'react-router-dom'

const Person = () => {
  const { id } = useParams()
  const { url } = useRouteMatch()
  const { name, friends } = find(~~id)
  return (
    <>
      <h1>{name}'friends are: </h1>
      <ul>
        {
          friends.map(id => {
            return (
              <li
                key={id}
              >
                <Link
                  to={`${url}/${id}`}
                >
                  {find(~~id)['name']}
                </Link>
              </li>
            )
          })
        }
      </ul>
      <Route
        path={`${url}/:id`}
      >
        <Person></Person>
      </Route>
    </>
  )
}

export default class App extends Component {
  render() {
    return (
      <Router>
        <Route path="/:id">
          <Person></Person>
        </Route>
        {/* <Redirect
          from="/"
          to="/0"
        ></Redirect> */}
        <Route path="/">
          <Redirect to="/0"></Redirect>
        </Route>
      </Router>
    )
  }
}

const PEEPS = [
  { id: 0, name: "Michelle", friends: [1, 2, 3] },
  { id: 1, name: "Sean", friends: [0, 3] },
  { id: 2, name: "Kim", friends: [0, 1, 3] },
  { id: 3, name: "David", friends: [1, 2] }
];

function find(id) {
  return PEEPS.find(p => p.id === id);
}